<template>
  <div class="child-menu">
    <div v-for="item in props.menu" :key="item.path" class="pl-4">
      <div class="menu-l cursor-pointer py-2" @click="handleLinkTo(item)">
        {{ item.meta?.title }}
      </div>
      <ChildMenu v-if="item.children && item.children.length > 0" :menu="item.children" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter, RouteRecordRaw } from 'vue-router'
const props = defineProps<{
  menu: RouteRecordRaw[]
}>()
const router = useRouter()
const handleLinkTo = (item: RouteRecordRaw): void => {
  if (item.children && item.children.length > 0) {
    return
  }
  router.push({ name: item.name })
}
</script>

<style scoped lang="scss"></style>
